<template>
  <Modal :width="1000" v-model:visible="open" @ok="handleSuccess">
    <div class="mt-20px max-h-500px overflow-auto w-full p-2">
      <ModuleFieldSelectForm
        style="margin-bottom: 8px"
        type="2"
        ref="ModuleFieldSelectFormRef"
        v-model:modelValue="newData.nestTableForm"
        @module-change-left="hadndleModuleChangeLeft"
        :formGetFieldsData="formGetFieldsData"
      />
      <ModeView v-model:modelValue="newData.modeViewData" />
      <MapFormFields
        style="margin-bottom: 8px"
        v-model:modelValue="newData.mapFormFields"
        :formGetFieldsData="formGetFieldsData"
        ref="fieldMappingRef"
      />
      <!-- <div class="text-right mb-2">
          <a-button type="primary" @click="handleCreate">增加</a-button>
        </div> -->
      <!-- <div>
          <Empty :image="simpleImage" v-if="!newData || newData.length == 0" />
        </div> -->
    </div>
  </Modal>
</template>
<script setup lang="ts">
  import { ref, PropType, computed, watch, nextTick } from 'vue';
  import { Modal } from 'ant-design-vue';
  import MapFormFields from './modules/MapFormFields.vue';
  import ModeView from './modules/ModeView.vue';
  import ModuleFieldSelectForm from './modules/ModuleFieldSelectForm.vue';
  import { getFormGetFields } from '/@/api/flowManage/flowManage';
  import { isArray } from '/@/utils/is';
  import { useRouter } from 'vue-router';
  const { currentRoute } = useRouter();

  const emit = defineEmits(['success', 'update:visible']);
  const props = defineProps({
    visible: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
    data: {
      type: Object as PropType<Object>,
      default: () => {
        return {};
      },
    },
  });

  const ModuleFieldSelectFormRef = ref<any>(null);

  const open = computed({
    get() {
      return props.visible;
    },
    set(e) {
      console.log('eee', e);
      emit('update:visible', e);
    },
  });
  const newData = ref<Recordable>({
    nestTableForm: {},
    modeViewData: {},
    mapFormFields: [],
  });
  watch(
    () => props.data,
    async (newVal) => {
      console.log('ModuleFieldSelectModal', newVal);
      if (newVal && Object.keys(newVal).length) {
        newData.value = newVal;
        if (newData.value.mapFormFields && newData.value.mapFormFields.length) {
          const record = newData.value.mapFormFields[0];
          if (record.sourceField && record.destField) {
            newData.value.mapFormFields.unshift({
              name: '映射',
              sourceField: '',
              sourceFieldName: '',
              destField: '',
              destFieldName: '',
            });
          }
        } else {
          newData.value.mapFormFields = [
            {
              name: '映射',
              sourceField: '',
              sourceFieldName: '',
              destField: '',
              destFieldName: '',
            },
          ];
        }
        await nextTick();
        getFormGetFieldsData();
      }
    },
    {
      immediate: true,
    },
  );
  const handleClose = () => {
    open.value = false;
  };

  const fieldMappingRef = ref<any>(null);
  const hadndleModuleChangeLeft = (val, node) => {
    newData.value.nestTableForm.destForm = val; // 源模块
    newData.value.nestTableForm.formCode = node?.formCode; // 源表单
    newData.value.nestTableForm.curFormCode = currentRoute.value?.query.formCode;
    getFormGetFieldsData();
    fieldMappingRef.value?.handleInit();
  };
  const formGetFieldsData = ref<Recordable[]>([]);
  //获取源字段
  const getFormGetFieldsData = () => {
    try {
      if (newData.value?.nestTableForm?.formCode) {
        getFormGetFields({ formCode: newData.value.nestTableForm.formCode }).then((res) => {
          formGetFieldsData.value = res || [];
          if (isArray(formGetFieldsData.value)) {
            formGetFieldsData.value.forEach((item) => {
              delete item.options;
            });
          }
        });
      }
    } catch (err) {
      console.log('getFormGetFields', err);
    }
  };

  const handleSuccess = () => {
    const { submit } = ModuleFieldSelectFormRef.value;
    submit().then((res) => {
      console.log('res', res);
      newData.value.nestTableForm = res;
      console.log('newData.value', newData.value);
      emit('success', newData.value);
      handleClose();
    });
  };
</script>
